<template>
    <div class="fillcontain">
        <div class="table_container" style="margin-bottom: 30px;margin-top: 10px;" v-if="selected_stadium != undefined">
            <el-button style="margin-top: 12px;" @click="addManage()">添加管理员</el-button>
        </div>
        <div class="table_container">
            <el-table  :data="tableData"  border  highlight-current-row  style="width:100%">
                <el-table-column  property="name"   label="用户名"   width="220"   align='center'> </el-table-column>
                <el-table-column  property="mobilePhone"  label="手机号码"  width="280"   align='center'>
                </el-table-column>
                <el-table-column   property="rolename"   label="类型"   width="120"    align='center'>
                </el-table-column>
                <el-table-column
                        prop="operation"
                        align='center'
                        label="操作"
                        width="180">
                    <template slot-scope='scope'>
                        <!--<el-button  type="warning"  icon='edit'  size="small"  @click='onEdit(scope.row.id)' >修改</el-button>-->
                        <el-button  type="danger"  icon='delete'  size="small"  @click='onDelete(scope.row.id)' >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

           <el-row>
                <el-col :span="24">
                    <div class="pagination">
                        <el-pagination
                            v-if='paginations.total > 0'
                            :page-sizes="paginations.page_sizes"
                            :page-size="paginations.page_size"
                            :layout="paginations.layout"
                            :total="paginations.total"
                            :current-page='paginations.page_index'
                            @current-change='handleCurrentChange'
                            @size-change='handleSizeChange'>
                        </el-pagination>
                    </div>
                </el-col>
            </el-row>

        </div>
        <el-dialog  title="添加管理员"   :visible.sync="dialogVisible"  :modal-append-to-body="false"  >
            <div class="form">
                <el-form  :inline="true"  :model='articleData'   ref="articleData"  class="demo-form-inline">
                    <div class="form-content">
                        <el-row>
                            <el-form-item  label="手机号码:" prop="name">
                                <el-input type="text" class="area" clearable :rows="1" autosize placeholder="请输入手机号码" v-model="articleData.mobilePhone">
                                </el-input>
                            </el-form-item>
                        </el-row>
                    </div>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false;save()">确 定</el-button>
            </span>
            </div>
        </el-dialog>
    </div>

</template>

<script>
    import * as mUtils from '@/utils/mUtils'
    import {axios} from 'utils/'

    export default {
        data(){
            return {
                sortnum:0,
                stadiumId:'',
                tokenAccess:'',
                dialogtitle:'',
                url_ajax:'',
                role:'',
                editData:{
                    name:''
                },
                selected_stadium:'',
                dialogVisible:false,
                articleData:{
                    mobilePhone:''
                },
                tableData: [],
              //需要给分页组件传的信息
                paginations: {
                    page_index: 1,  // 当前位于哪页
                    total: 0,        // 总数
                    page_size: 20,   // 1页显示多少条
                    page_sizes: [5, 10, 15, 20],  //每页显示多少条
                    layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
                },
            }
        },
    	components: {

    	},
        created(){
            this.tokenAccess =  mUtils.getStore('tokenAccess');
            this.role = mUtils.getStore('role');
            this.selected_stadium = this.$route.query.stadium;
            if(this.selected_stadium!=undefined){
                this.stadiumId = this.selected_stadium ;
            }
            console.log(this.selected_stadium);
        },
        mounted(){
            this.getList({
                fun: () => {}
            });
        },
        methods: {
            onEdit(id){

            },
            getList({
                page,
                page_size,
                where,
                fun
            } = {}){
                var query = this.$route.query;
                this.paginations.page_index = page || parseInt(query.page) || 1;
                this.paginations.page_size  = page_size || parseInt(query.page_size) || this.paginations.page_size;
                var data = {
                    pageIndex: this.paginations.page_index,
                    pageSize: this.paginations.page_size
                };
                if (where) {
				   data = Object.assign(data, where || {});
                } 
                // 封装  get,path,params,fn,errfn  stadiumId=' +this.stadiumId+ '&

                if(this.role==='super'){
                    this.url_ajax = 'http://59.110.70.252:8031/managers?stadiumId=' +this.stadiumId+ '&pageNo=' + this.paginations.page_index + '&pageSize=' + this.paginations.page_size;
                }else{
                    this.url_ajax = 'http://59.110.70.252:8031/managers?stadiumId=' +this.stadiumId+ '&pageNo=' + this.paginations.page_index + '&pageSize=' + this.paginations.page_size;
                }
                axios({
                    type:'get',
                    path:this.url_ajax,
                    data:data,
                    fn:data=>{
                        //成功之后的回调函数
                        this.paginations.total = data.total;
                        this.tableData = [];
                    	data.data.forEach( (item,index) => {
                    	    if(item.role === 'super'){
                                item.rolename = '超级管理员';
                            }else{
                                item.rolename = '管理员';
                            }
                    	  	const tableItem = {
                                id: item.id,
                                mobilePhone: item.mobilePhone,
                                name: item.name,
                                rolename: item.rolename,

                    		}
                    		this.tableData.push(tableItem);
                        })
                        fun && fun();
                    },
                    headers: {
                        'x-access-token': this.tokenAccess,
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
           },

            /**
            * 改变页码和当前页时需要拼装的路径方法
            * @param {string} field 参数字段名
            * @param {string} value 参数字段值
            */
            setPath(field, value) {
                var path  = this.$route.path,
                    query = Object.assign({}, this.$route.query);
                if (typeof field === 'object') {
                    query = field;
                } else {
                    query[field] = value;
                }
                this.$router.push({
                    path,
                    query
                });
            },
            addManage(){
                this.dialogVisible = true;
            },
            save(){
                if(this.articleData.mobilePhone != '' && this.selected_stadium != undefined) {
                    axios({
                        type: 'POST',
                        path: 'http://59.110.70.252:8031/stadiums/managers?stadiumId='+ this.selected_stadium + "&mobilePhone=" + this.articleData.mobilePhone ,
                        data: '',
                        fn: data => {
                            //成功之后的回调函数
                            if(data.success == true){
                                this.$message({
                                    showClose: true,
                                    message: '添加管理员成功~',
                                    type: 'success'
                                });
                                this.articleData.mobilePhone = 0;
                            } else {
                                this.$message.error({
                                    showClose: true,
                                    message: data.message
                                });
                            }
                        },
                        headers: {
                            'x-access-token': this.tokenAccess,
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                }
            },
            onDelete(id){
                if(id){
                    this.$confirm('确定删除？').then(_ => {
                        axios({
                            type: 'DELETE',
                            path: 'http://59.110.70.252:8031/stadiums/managers?stadiumId=' + this.stadiumId+'&userId='+id,
                            data: '',
                            fn: data => {
                                //成功之后的回调函数
                                this.getList();
                            },
                            headers: {
                                'x-access-token': this.tokenAccess,
                                'Content-Type': 'application/x-www-form-urlencoded'
                            }
                        })
                    })
                }
            },
            // 每页多少条切换
            handleSizeChange(page_size) {
               console.log(`每页 ${page_size} 条`);
               this.getList({
                    page_size,
                    fun: () => {
                        this.setPath('page_size', page_size);
                    }
			   });
            },
            // 上下分页
            handleCurrentChange(page) {
               this.sortnum = this.paginations.page_size*(page-1);
               this.getList({
                    page,
                    fun: () => {
                        this.setPath('page', page);
                    }
                });
            },
           
        },
    }
</script>


